<template>
	<view class="container" :style="appThemeStyle">
		<u-navbar :border-bottom="false" :title="title" :title-color="appTheme.mainFg" :back-icon-color="appTheme.mainFg" :background="{backgroundColor:appTheme.mainBg}"></u-navbar>
		<scroll-view class="scroll-view" scroll-y>
			<view class="userinfo">
				<view class="formbox">
					<u-form :model="form" ref="form" :border-bottom="true" label-width="120">
						<u-form-item label="手机号" prop="mobile"><u-input v-model="form.mobile" type="number" :disabled="true" placeholder="请输入手机号" /><text class="u-font-xs" style="color:#999;">不可修改</text></u-form-item>
						<u-form-item label="昵称" prop="nick_name" :required="true"><u-input v-model="form.nick_name" placeholder="请输入昵称" /></u-form-item>
						<u-form-item label="性别" prop="gender">
							<u-radio-group v-model="form.gender">
								<u-radio :name="0" :active-color="appTheme.mainBg">保密</u-radio>
								<u-radio :name="1" :active-color="appTheme.mainBg">男</u-radio>
								<u-radio :name="2" :active-color="appTheme.mainBg">女</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="头像" prop="pic" :border-bottom="false">
							<u-upload ref="uUpload1" :max-count="1" :size-type="['compressed']" :multiple="false" :max-size="1024*1024" :file-list="fileList" :auto-upload="false" :action="uploadUrl" @on-success="uploadOk" @on-choose-complete="choosePic" @on-remove="removePic"></u-upload>
						</u-form-item>
						<template v-if="userInfo.is_guide">
							<u-divider>银行卡信息</u-divider>
							<u-form-item label="开户行" prop="bank_name" :required="true"><u-input v-model="form.bank.name" placeholder="请输入开户行" /></u-form-item>
							<u-form-item label="卡号" prop="bank_no" :required="true"><u-input v-model="form.bank.no" placeholder="请输入卡号" /></u-form-item>
							<u-form-item label="姓名" prop="bank_realname" :required="true"><u-input v-model="form.bank.realname" placeholder="请输入姓名" /></u-form-item>
							<u-form-item label="电话" prop="bank_tel" :required="true"><u-input v-model="form.bank.tel" placeholder="请输入电话" /></u-form-item>
						</template>
					</u-form>
				</view>
				<view class="btnbox">
					<u-button :ripple="true" :hair-line="false" shape="circle" :custom-style="{background:appTheme.matchColor,color:'#fff',border:0,height:'90rpx'}" @click="submitForm()">提交</u-button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { detail as detailApi, edit as editApi, userinfo } from '@/api/user'
	import request from '@/utils/request.js'
	import store from '@/store'
	export default {
		data() {
			return {
				title: '个人设置',
				form: {
					mobile: '',
					nick_name: '',
					gender: 0,
					avatar: '',
					bank: {
						name: '',
						no: '',
						realname: '',
						tel: ''
					}
				},
				uploadUrl: '',
				isUpload: false,
				fileList: [],
			}
		},
		onLoad() {
			this.uploadUrl = request.uploadImg
		},
		onShow() {
			let app = this
			detailApi().then(data => {
				app.form.mobile = data.mobile
				app.form.nick_name = data.nick_name
				app.form.gender = data.gender
				app.form.avatar = data.avatar
				if(app.form.avatar){
					app.fileList = [{
						url: data.avatar_file[0].url,
					}]
				}
				if(data.bank){
					app.form.bank = data.bank
				}
			})
		},
		methods: {
			choosePic() {
				this.isUpload = true
			},
			removePic() {
				this.isUpload = false
				this.form.avatar = ''
			},
			uploadOk(data) {
				this.form.avatar = data.id
				this.postForm()
			},
			submitForm() {
				if(this.isUpload){
					this.$refs.uUpload1.upload()
				}else{
					this.postForm()
				}
			},
			postForm() {
				editApi({form: this.form}).then(data => {
					userinfo().then(res => {
						store.dispatch('SetUserInfo', res)
						uni.showToast({
							title: '更新成功',
							icon: 'success'
						})
						// 跳转回原页面
						setTimeout(() => uni.navigateBack(), 2000)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		overflow: hidden;
	}
	.scroll-view {
		width: 100vw;
		height: calc(100vh - 44px);
		background: linear-gradient(to bottom, $main-bg 30rpx, transparent 375rpx);
	}
	.userinfo {
		height: auto;
		background: linear-gradient(to bottom, $main-bg calc(44px + 50rpx), transparent 375rpx);
		.formbox {
			margin: 30rpx;
			padding: 0 40rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			overflow: hidden;
			.more {
				padding: 20rpx 0;
			}
		}
		.btnbox {
			padding: 30rpx;
		}
	}
</style>
